<template>
  <div class="header">
    <span>全部</span>
    <span>审核中</span>
    <span>成功</span>
    <span>失败</span>
  </div>
  <table class="native-table" style="width: 100%">
    <thead>
      <tr>
        <th style="width: 6vw">编号</th>
        <th style="width: 18vw">图片</th>
        <th style="width: 13vw">课程名称</th>
        <th style="width: 13vw">添加时间</th>
        <th style="width: 13vw">状态</th>
        <th style="width: 13vw">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in tableData" :key="row.id" :style="columnStyle()">
        <td>{{ row.id }}</td>
        <td style="display: flex; align-items: center; justify-content: center">
          <div style="height: 12vh; width: 24vh; overflow: hidden">
            <img :src="row.imageUrl" alt="图片" style="width: 100%" />
          </div>
        </td>
        <td>{{ row.courseName }}</td>
        <td>{{ row.addTime }}</td>
        <td>{{ row.status }}</td>
        <td>
          <a href="javascript:void(0)" @click="handleView(row)">查看</a>|
          <a href="javascript:void(0)" @click="handleDownload">下载报告</a>|
          <a href="javascript:void(0)">修改</a>
        </td>
      </tr>
    </tbody>
  </table>
  <el-dialog v-model="dialogVisible" title="课程信息">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="编号">{{ currentRow.id }}</el-descriptions-item>
      <el-descriptions-item label="图片">
        <img :src="currentRow.imageUrl" style="height: 10vh" />
      </el-descriptions-item>
      <el-descriptions-item label="课程名称">{{ currentRow.courseName }}</el-descriptions-item>
      <el-descriptions-item label="添加时间">{{ currentRow.addTime }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ currentRow.status }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const columnStyle = () => {
  return {
    'line-height': '17vh',
    'font-size': '16px'
  }
}

import img01 from '../assets/01.jpg'
import img02 from '../assets/02.jpg'
import img03 from '../assets/03.jpg'
import img04 from '../assets/04.jpg'
import download from '../assets/咏鹅_报告.pdf' // 替换为你的下载链接

const tableData = ref([
  {
    id: 1,
    imageUrl: img01,
    courseName: '咏鹅',
    addTime: new Date().toLocaleDateString(),
    status: '统计成功'
  },
  {
    id: 2,
    imageUrl: img02,
    courseName: '动画世界',
    addTime: new Date().toLocaleDateString(),
    status: '最终完成'
  },
  {
    id: 3,
    imageUrl: img03,
    courseName: '孙权劝学',
    addTime: new Date().toLocaleDateString(),
    status: '最终完成'
  },
  {
    id: 4,
    imageUrl: img04,
    courseName: '细胞结构',
    addTime: new Date().toLocaleDateString(),
    status: '统计成功'
  }
])

const handleDownload = () => {
  fetch(download)
    .then((response) => response.blob())
    .then((blob) => {
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = download.split('/').pop()
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)
      message.success('下载成功')
    })
    .catch((e) => {
      message.error('下载失败')
    })
}

const dialogVisible = ref(false)
const currentRow = ref({})

const handleView = (row) => {
  currentRow.value = row
  dialogVisible.value = true
}
</script>

<style scoped lang="scss">
.header {
  height: 8vh;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;

  span {
    margin-right: 6vh;
    font-size: large;
    cursor: pointer;
  }
}

.native-table {
  width: 100%;
  border-collapse: collapse;

  th {
    background-color: #f2f2f2;
    color: #606266;
    font-size: 16px;
    line-height: 8vh;
  }

  td {
    height: 15vh;
    text-align: center;
    vertical-align: middle;
  }
}

a {
  color: #5291a8;
  text-decoration: none;
  margin-right: 10px;
}

a:hover,
a:active {
  color: #5291a8;
  text-decoration: none;
}
</style>
